<template>
  <el-dialog title="短信充值" :visible.sync="showDialog_" top="0%" custom-class='dialog_right dialogScroll_add MkAddDoctor' @open="openDialog" @close="closeDialog('addForm')">
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-200)+'px'}]">
      <el-form :model="addForm.formItem" :rules="addForm.rules" ref="addForm" label-width="110px">
        <h5>成都世外乡村科技有限公司</h5>
        <el-form-item label="客户编号" prop="number">{{messageInfo.number}}</el-form-item>
        <el-form-item label="客户类型" prop="type">{{messageInfo.type | formatType}}</el-form-item>
        <el-form-item label="社区/店铺" prop="communityName">{{messageInfo.communityName}}</el-form-item>
        <el-form-item label="条数" prop="amount">
          <el-input v-model='addForm.formItem.amount' placeholder="请输入短信条数（必填）">
          </el-input>
        </el-form-item>
      </el-form>
    </el-scrollbar>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" class="btn-primary" @click="submitForm('addForm')" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
      <el-button type='primary' class="btn-cancel" @click="showDialog_=false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import bannerService from '../../services/banner'
  import {mapState} from 'vuex'
  export default {
    name: 'MkAddDoctor',
    props: ['showDialog',"messageInfo"],
    computed:mapState({
     bodyHeight: state=> state.global.bodyHeight,
    }),
    watch: {
      showDialog: function(value) {
        this.showDialog_ = value;
      },
    },
    mounted: function() {

    },
    filters: {
      formatType(value){
        if(value=='PROPERTY'){
          return '物业客户'
        }else if(value=='MERCHANT'){
          return '商城客户'
        }
      },
    },
    methods: {
      openDialog() {
        this.isRefresh = false;
        this.clickSubmitBtn = false;
      },
      closeDialog(formName) {
        this.$refs[formName].resetFields();
        let form = this.addForm.formItem;
        for(let i in form) {
          form[i] = '';
        }
        this.$emit('closeDialog',this.isRefresh);
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid=>{
          if(valid) {
            this.fullscreenLoading = true;
            this.addForm.formItem.objectId=this.messageInfo.id;
            this.addForm.formItem.source=this.messageInfo.type;
            bannerService.loadMessageCharge(this.addForm.formItem, data=>{
              this.$message.success('充值成功');
              this.isRefresh = true;
              this.showDialog_ = false;
              this.fullscreenLoading = false;
            })
          }
        })
      },
    },
    data() {
      return {
        isFirst: true,
        clickSubmitBtn: false,
        fullscreenLoading: false,
        isRefresh: false,
        showDialog_: this.showDialog,
        addForm: {
          formItem: {
            amount: '',
            objectId: '',
            source: '',
          },
          rules: {
            amount:{required:true,message:'请输入短信条数',trigger:'change'},
          }
        },
      }
    }
  }

</script>

<style lang="less">
  @import '../../assets/style/main.less';
  .MkAddDoctor {
    h5 {
      font-size: 18px;
      font-weight: normal;
      color: @fontColorOne;
      padding: 20px 0;
    }
    h5:first-child {
      padding-top: 0;
    }
  }
</style>
